<template>
	<view class="box">
		<!-- 轮播图 -->
		<view class="chart">

			<view class="backgroundBanner">
				<view class="banner">
					<swiper autoplay="true" :interval="2000" :duration="500" circular="true" easing-function="true"
						indicator-dots='true' indicator-color="#ccc" indicator-active-color="#0094fd">
						<swiper-item v-for="(item, index) in bannerList" :key="index">
							<image :src="item.url" style="border-radius:0 0 20px 20px;"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<view class="gudig">
				<view class="gudignei">
					<text class="iconfont" style="font-size: 70rpx;">&#xe891;</text>
					<text style="font-size: 25rpx;margin-top: 10rpx;">扫一扫</text>
				</view>
				<view class="gudignei">
					<text class="iconfont" style="font-size: 70rpx;">&#xe60b;</text>
					<text style="font-size: 25rpx;margin-top: 10rpx;">电子证照</text>
				</view>
				<view class="gudignei">
					<text class="iconfont" style="font-size: 70rpx;">&#xe604;</text>
					<text style="font-size: 25rpx;margin-top: 10rpx;">部门服务</text>
				</view>
				<view class="gudignei">
					<text class="iconfont" style="font-size: 70rpx;">&#xe660;</text>
					<text style="font-size: 25rpx;margin-top: 10rpx;">区县服务</text>
				</view>
			</view>

		</view>
		<!-- 功能 -->
		<view class="function">
			<view class="backgroundBanner">
				<view class="function_banner">
					<swiper easing-function="true" indicator-dots='true' indicator-color="#ccc"
						indicator-active-color="#0094fd">
						<swiper-item style="width: 100%; height: 100%; display: flex; flex-wrap:wrap">
							<view class="function_view">
								<text class="iconfont"
									style="font-size: 60rpx;margin-bottom: 10rpx;color: #00d28b;">&#xe6df;</text>
								<text style="font-size: 25rpx;">防疫防空</text>
								<text style="font-size: 25rpx;">服务</text>
							</view>
							<view class="function_view">
								<text class="iconfont"
									style="font-size: 60rpx;margin-bottom: 10rpx;color: #2689ff;">&#xe785;</text>
								<text style="font-size: 25rpx;">核算检测</text>
								<text style="font-size: 25rpx;">一键通过</text>
							</view>
							<view class="function_view">
								<text class="iconfont"
									style="font-size: 60rpx;margin-bottom: 10rpx;color: #00d28b;">&#xe61e;</text>
								<text style="font-size: 25rpx;">郑好码</text>
								<!-- <text style="font-size: 25rpx;">一键通过</text> -->
							</view>
							<view class="function_view">
								<text class="iconfont"
									style="font-size: 60rpx;margin-bottom: 10rpx;color: #2689ff;">&#xe611;</text>
								<text style="font-size: 25rpx;">返郑饭豫</text>
								<text style="font-size: 25rpx;">人员登记</text>
							</view>
							<view class="function_view">
								<text class="iconfont"
									style="font-size: 60rpx;margin-bottom: 10rpx;color: #5639e5;">&#xe767;</text>
								<text style="font-size: 25rpx;">郑好融</text>
								<!-- <text style="font-size: 25rpx;">一键通过</text> -->
							</view>
							<view class="function_view">
								<text class="iconfont"
									style="font-size: 60rpx;margin-bottom: 10rpx;color: #f96159;">&#xe600;</text>
								<text style="font-size: 25rpx;">郑好拍</text>
								<!-- <text style="font-size: 25rpx;">一键通过</text> -->
							</view>
							<view class="function_view">
								<text class="iconfont"
									style="font-size: 60rpx;margin-bottom: 10rpx;color: #00d28b;">&#xe61b;</text>
								<text style="font-size: 25rpx;">社保</text>
								<!-- <text style="font-size: 25rpx;">一键通过</text> -->
							</view>
							<view class="function_view">
								<text class="iconfont"
									style="font-size: 60rpx;margin-bottom: 10rpx;color: #fe635c;">&#xe69c;</text>
								<text style="font-size: 25rpx;">郑惠企·亲</text>
								<text style="font-size: 25rpx;">清在线</text>
							</view>
							<view class="function_view">
								<text class="iconfont"
									style="font-size: 60rpx;margin-bottom: 10rpx;color: #2689ff;">&#xe603;</text>
								<text style="font-size: 25rpx;">公基金</text>
								<!-- <text style="font-size: 25rpx;">一键通过</text> -->
							</view>
							<view class="function_view">
								<text class="iconfont"
									style="font-size: 60rpx;margin-bottom: 10rpx;color: #fb635d;">&#xe7c6;</text>
								<text style="font-size: 25rpx;">契税专区</text>
								<!-- <text style="font-size: 25rpx;">一键通过</text> -->
							</view>
						</swiper-item>

						<swiper-item style="width: 100%; height: 100%; display: flex; flex-wrap:wrap">
							<view class="function_view">
								<text class="iconfont"
									style="font-size: 60rpx;margin-bottom: 10rpx;color: #00d28b;">&#xe6df;</text>
								<text style="font-size: 25rpx;">一件事</text>
								<text style="font-size: 25rpx;">专区</text>
							</view>
							<view class="function_view">
								<text class="iconfont"
									style="font-size: 60rpx;margin-bottom: 10rpx;color: #2689ff;">&#xe785;</text>
								<text style="font-size: 25rpx;">智慧停车</text>
								<!-- <text style="font-size: 25rpx;">一键通过</text> -->
							</view>
							<view class="function_view">
								<text class="iconfont"
									style="font-size: 60rpx;margin-bottom: 10rpx;color: #00d28b;">&#xe61e;</text>
								<text style="font-size: 25rpx;">居住郑一</text>
								<text style="font-size: 25rpx;">件事</text>
							</view>
							<view class="function_view">
								<text class="iconfont"
									style="font-size: 60rpx;margin-bottom: 10rpx;color: #2689ff;">&#xe611;</text>
								<text style="font-size: 25rpx;">企业服务</text>
								<text style="font-size: 25rpx;">专区</text>
							</view>
							<view class="function_view">
								<text class="iconfont"
									style="font-size: 60rpx;margin-bottom: 10rpx;color: #5639e5;">&#xe767;</text>
								<text style="font-size: 25rpx;">人社</text>
								<!-- <text style="font-size: 25rpx;">一键通过</text> -->
							</view>
							<view class="function_view">
								<text class="iconfont"
									style="font-size: 60rpx;margin-bottom: 10rpx;color: #f96159;">&#xe600;</text>
								<text style="font-size: 25rpx;">燃气加装</text>
								<text style="font-size: 25rpx;">安全装置</text>
							</view>
							<view class="function_view">
								<text class="iconfont"
									style="font-size: 60rpx;margin-bottom: 10rpx;color: #00d28b;">&#xe61b;</text>
								<text style="font-size: 25rpx;">稳经济促</text>
								<text style="font-size: 25rpx;">增长</text>
							</view>
							<view class="function_view">
								<text class="iconfont"
									style="font-size: 60rpx;margin-bottom: 10rpx;color: #fe635c;">&#xe69c;</text>
								<text style="font-size: 25rpx;">基层服务</text>
								<text style="font-size: 25rpx;">专区</text>
							</view>
							<view class="function_view">
								<text class="iconfont"
									style="font-size: 60rpx;margin-bottom: 10rpx;color: #2689ff;">&#xe603;</text>
								<text style="font-size: 25rpx;">医保</text>
								<!-- <text style="font-size: 25rpx;">一键通过</text> -->
							</view>
							<view class="function_view">
								<text class="iconfont"
									style="font-size: 60rpx;margin-bottom: 10rpx;color: #fb635d;">&#xe7c6;</text>
								<text style="font-size: 25rpx;">更多</text>
								<!-- <text style="font-size: 25rpx;">一键通过</text> -->
							</view>
						</swiper-item>

					</swiper>
				</view>
			</view>
		</view>
		<!-- 公告 -->
		<view class="notice">
			<view class="gongg">
				公告
			</view>
			<view class="lunbs">
				<swiper style="width: 100%;height: 70rpx;" :indicator-dots="false" :autoplay="true" :interval="2000"
					:duration="500" :circular="true" :vertical="true" easing-function="linear">
					<swiper-item style="display: flex;align-items: center;justify-content: space-between;">
						<text
							style="width: 80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">二分哦i说呢‘粉色i妇女i森防’哦i恩富i说呢二哦能否欧神诺而藕粉色妇女女粉丝欸你发哦斯恶是挖的哇</text>
						<text style="width: 10%;font-size: 40rpx;">></text>
					</swiper-item>
					<swiper-item style="display: flex;align-items: center;justify-content: space-between;"
						v-for="(item,index) in gongao" :key="item.id">
						<text
							style="width: 80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{item.title}}</text>
						<text style="width: 10%;font-size: 40rpx;">></text>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 最新上线 -->
		<view class="newest">
			<view class="newest1">
				最新上线
				<text style="margin-left: 20rpx;color: #616161; font-size: 30rpx;">热门主题</text>
			</view>
			<view class="newest2">
				<scroll-view scroll-x="true" class="sdandwk">
					<view class="dadada">
						<view class="newest2_neir" style="background-color: #ebfbf6;">
							<text style="width: 90%;font-weight: 600;font-size: 28rpx;color:#40c99c;">企业服务专区</text>
							<text style="width: 90%;margin-top: 10rpx;color: #88dfcb;">行政许可 设立变更</text>
						</view>
						<view class="newest2_neir" style="background-color: #ffeed2;">
							<text style="width: 90%;font-weight: 600;font-size: 28rpx;color:#f59006;">亲情待办专区</text>
							<text style="width: 90%;margin-top: 10rpx;color: #f8d580;">帮助家人 待办事项</text>
						</view>
						<view class="newest2_neir" style="background-color: #fdeeeb;">
							<text style="width: 90%;font-weight: 600;font-size: 28rpx;color:#e19376;">基层服务专区</text>
							<text style="width: 90%;margin-top: 10rpx;color: #e4af8f;"> 参加村社区全覆盖</text>
						</view>
						<view class="newest2_neir" style="background-color: #edf3ff;">
							<text style="width: 90%;font-weight: 600;font-size: 28rpx;color:#5385d3;">新生儿一件事</text>
							<text style="width: 90%;margin-top: 10rpx;color: #6ea7dc;"> 出生登记 医保社保</text>
						</view>
						<view class="newest2_neir" style="background-color: #e7e9fe;">
							<text style="width: 90%;font-weight: 600;font-size: 28rpx;color:#8784d6;">燃气安全装置加装</text>
							<text style="width: 90%;margin-top: 10rpx;color: #c7c3f8;">加装缴费 安全用气</text>
						</view>
					</view>
				</scroll-view>

			</view>
		</view>
		<!-- 咨询 -->
		<view class="service">

			<view class="service_tou">
				政策·咨询
			</view>
			<view class="service_nei">

				<view class="se_nei">
					<view class="se_nei1">
						<view class="se_nei11">
							【新闻内容】这是我的新闻内容
						</view>
						<view class="se_nei12">
							郑好办 2021-13-14
						</view>
					</view>
					<view class="se_nei2">
						<image style="width: 100%;height:100%;border-radius: 10px;"
							src="https://pic.baike.soso.com/ugc/baikepic2/18799/cut-20200718194119-148374171_jpg_711_568_52732.jpg/300"
							mode=""></image>
					</view>
				</view>

				<view class="se_nei">
					<view class="se_nei1">
						<view class="se_nei11">
							【新闻内容】这是我的新闻内容
						</view>
						<view class="se_nei12">
							郑好办 2021-13-14
						</view>
					</view>
					<view class="se_nei2">
						<image style="width: 100%;height:100%;border-radius: 10px;"
							src="https://pic.baike.soso.com/ugc/baikepic2/18799/cut-20200718194119-148374171_jpg_711_568_52732.jpg/300"
							mode=""></image>
					</view>
				</view>

				<view class="se_nei">
					<view class="se_nei1">
						<view class="se_nei11">
							【新闻内容】这是我的新闻内容
						</view>
						<view class="se_nei12">
							郑好办 2021-13-14
						</view>
					</view>
					<view class="se_nei2">
						<image style="width: 100%;height:100%;border-radius: 10px;"
							src="https://pic.baike.soso.com/ugc/baikepic2/18799/cut-20200718194119-148374171_jpg_711_568_52732.jpg/300"
							mode=""></image>
					</view>
				</view>

			</view>


			<!-- 底部 -->
			<view class="dibu">
				<text>郑州市人民政府主办</text>
				<text>郑州市大数据管理局承办</text>
				<text>郑州大数据发展有限公司运营</text>
				<text>客服电话: 0371-9618956</text>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//轮播图
				bannerList: [{
						url: 'https://img-blog.csdnimg.cn/37fa214c6c744e4ba0fcb2233017c8f4.png',
						color: 'red'
					},
					{
						url: 'https://img-blog.csdnimg.cn/8717f0e8d2b64efebcdc9c506a39bd61.png',
						color: 'green'
					},
					{
						url: 'https://img-blog.csdnimg.cn/ae94ba1d709744e2a6e36eb7d981f0a9.png',
						color: 'blue'
					},
					{
						url: 'https://img-blog.csdnimg.cn/6cc01905e7e942bdadb574af1079ae15.png',
						color: '#F0AD4E'
					}
				],
				// 公告
				gongao: []
			}
		},

		methods: {
			// 轮播图，公告
			fun() {
				// 轮播图
				this.$api.Carousel({
						type: 1
					}).then((res) => {
						console.log(res);
					}),
					// 公告
					this.$api.Notice({
						type: 1
					}).then((res) => {
						// console.log(res.data.data);
						this.gongao = res.data.data
						console.log(this.gongao)
					})
			}
		},
		mounted() {
			this.fun()
		},

	}
</script>

<style>
	.box {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f7f7f7;
	}

	/* 底部 */
	.dibu {
		margin-top: 100rpx;
		width: 750rpx;
		color: #ccc;
		font-size: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	/* 咨询 */
	.service {
		margin-top: 20rpx;
		padding: 25rpx;
		width: 700rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.service_tou {
		font-weight: 700;
	}

	.service_nei {
		margin-top: 30rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.se_nei {
		width: 100%;
		height: 200rpx;
		display: flex;
		justify-content: space-around;
		border-bottom: 1px solid #f7f7f7;
		padding: 20rpx 0;
	}

	.se_nei1 {
		width: 70%;

		display: flex;
		flex-direction: column;
	}

	.se_nei11 {
		font-weight: 550;
		width: 80%;
		height: 90%;
	}

	.se_nei12 {
		height: 10%;
		color: #ccc;
		font-size: 30rpx
	}

	.se_nei2 {
		width: 30%;
	}


	/* 最新上线 */
	.newest {
		margin-top: 30rpx;
		padding: 25rpx;
		width: 700rpx;
		background-color: #fff;
	}

	.newest1 {
		/* width: 750rpx; */
		width: 100%;
		font-weight: 500;
	}

	.newest2 {
		/* margin-top: 20rpx; */
		width: 100%;
	}

	.sdandwk {
		width: 100%;
		height: 100%;
	}

	.dadada {
		width: 1500rpx;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.newest2_neir {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
		margin: 20rpx;
		width: 500rpx;
		height: 150rpx;
		border-radius: 10px;
	}

	/* 公告 */
	.notice {
		display: flex;
		align-items: center;
		background-color: #fff;
		justify-content: space-between;
		width: 750rpx;
		height: 80rpx;
		padding: 15rpx 0;
		border-top: 1rpx solid #e8effc;
	}

	.gongg {
		width: 20%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 700;
	}

	.lunbs {
		width: 80%;
		height: 100%;
		display: flex;
		align-items: center;
		font-size: 25rpx
	}

	/* 功能 */
	.function {
		background-color: #fff;
		/* margin-top: 20rpx; */
		padding-top: 20rpx;
		width: 750rpx;
		height: 400rpx;
		/* background-color: aqua; */
	}

	.function_view {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		width: 20%;
		height: 40%;
		/* background-color: aquamarine; */
	}

	.function_banner {
		width: 100%;

	}

	.function_banner swiper {
		height: calc(750rpx / 2);
		/* height: 500rpx; */
	}

	/* 轮播图 */
	.chart {
		width: 750rpx;
		position: relative;
	}

	.gudig {
		width: 750rpx;
		margin-top: 100rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: absolute;
		top: 0;
	}

	.gudignei {
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}









	/* //轮播图 */
	.backgroundBanner {
		box-sizing: border-box;
	}

	.banner {
		width: 100%;
		margin: 0 auto;
	}

	.banner swiper {
		height: calc(750rpx / 1.5);
		/* height: 500rpx; */
	}

	.banner image {
		width: 100%;
		height: 100%;
	}
</style>
